<html>
  <head>
    <title>
      收银台
    </title>
    <link href="/tcpay/vendor/bootstrap-4.4.1-dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="/tcpay/vendor/fontawesome-free/css/all.min.css" rel="stylesheet">
    <link href="/tcpay/css/theme.css" rel="stylesheet">
    <link rel="stylesheet" href="/alipay_tf/layer(1).css" id="layuicss-layer">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  
  
  		<style type="text/css">
			a{
				color:#666666;
				text-decoration:none; 
				font-weight:bold;
			}
			a:hover{
			    transition: all 0.6s;
			    text-decoration:none; 
                color:#FB846A;
            }
			a img{
				transition: all 0.6s;
			}
			a img:hover{
				transform: scale(1.2);
			}
		</style>


  <body>
    <div style="display: none" id="formJump"></div>
    <div class="container-fluid bg-dark text-light text-center display-4 embed-responsive">
      <i class="fab fa-amazon-pay">
      </i>
      收银台
    </div>
    <div class="text-md-center text-white w-100">
      聚合支付
    </div>
    
    <div class="container">
      <div class="container">
        <div class="row">
          <div class="col-md-4">
          </div>
          <div class="col-md-4">
            <div class="alert alert-warning" role="alert">
             <b> 订单编号：${mchOrderNo!} </b>
            </div>
          </div>
          <div class="col-md-4">
          </div>
        </div>
      </div>
      <div class="container">
        <div class="row">
          <div class="col-md-4">
          </div>
          <div class="col-md-4">
            <div class="alert alert-warning" role="alert">
            <b>  充值金额：${amountStr!}元 </b>
            </div>
          </div>
          <div class="col-md-4">
          </div>
        </div>
      </div>
      <div class="container">
        <div class="row">
          <div class="col-md-4">
          </div>
          <div class="col-md-4">
            <div class="alert alert-warning" role="alert">
            <b>  以订单金额为准，切勿修改金额支付 </b>
            </div>
          </div>
          <div class="col-md-4">
          </div>
        </div>
      </div>
    <form>
      <ul class="list-group text-center">
        <li class="list-group-item active">
        <big><b>  请选择支付方式  </b></big>
        </li>
        <#if tcpay_28??>
          <li class="list-group-item action">
            <a href = "javascript:void(0);" onclick ="pay('${tcpay_28!}')">
          <img src="/tcpay/images/bankbank.png" width="200" height="64">
              <br>网银转账支付</br></a>
          </li>
        </#if>
        <#if tcpay_29??>
        <li class="list-group-item action">
          <a href = "javascript:void(0);" onclick ="pay('${tcpay_29!}')">
          <img src="/tcpay/images/bankbank.png" width="200" height="64">
          <br>网银转账支付</br></a>
        </li>
        </#if>
        <#if tcpay_30??>
        <li class="list-group-item action">
          <a href = "javascript:void(0);" onclick ="pay('${tcpay_30!}')">
          <img src="/tcpay/images/alipaybank.png" width="200" height="64">
          <br>支付宝手动支付<br></a>
        </li>
        </#if>
        <#if tcpay_31??>
          <li class="list-group-item action">
           <a href = "javascript:void(0);" onclick ="pay('${tcpay_31!}')">
          <img src="/tcpay/images/alipaybank.png" width="200" height="64">
              <br>支付宝扫码支付</br></a>
          </li>
        </#if>
        <#if tcpay_32??>
        <li class="list-group-item action">
          <a href = "javascript:void(0);" onclick ="pay('${tcpay_32!}')">
          <img src="/tcpay/images/alipaybank.png" width="200" height="64">
          <br>支付宝支付</br></a>
        </li>
        </#if>
        <#if tcpay_33??>
        <li class="list-group-item action">
          <a href = "javascript:void(0);" onclick ="pay('${tcpay_33!}')">
          <img src="/tcpay/images/wxbank.png" width="200" height="64">
          <br>微信手动支付</br></a>
        </li>
        </#if>
      </ul>
    </form>
<script type="text/javascript" src="/tcpay/vendor/jquery/jquery-3.4.1.min.js"/>

<script type="text/javascript" src="/tcpay/vendor/bootstrap-4.4.1-dist/js/bootstrap.bundle.js"/>

<script src="/tcpay/js/theme.js"></script>
<script src="/alipay_tf/jquery.min.js"></script>
<script src="/alipay_tf/layer.js"></script>
<script>

function getDeviceType() {
        if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {  //判断iPhone|iPad|iPod|iOS
            sid = 'ios';
        } else if (/(Android)/i.test(navigator.userAgent)) {   //判断Android
            sid = 'andorid';
        } else {  //pc
            sid = 'pc';
        };
        return sid;
    }

    function pay(productId) {
      var load = layer.msg('正在请求支付...', {
        icon: 16
        ,shade: 0.01
        ,time: 9999999999
      });
      //这里可以写ajax方法提交表单
      $.ajax({
        type: "POST",
        url: '/api/cashier/tcpay/pay',
        data: {
          mchId: '${mchId!}',
          appId: '${appId!}',
          mchOrderNo : '${mchOrderNo!}',
          productId: productId,
          subject: '${subject!}',
          body: '${body!}',
          notifyUrl: '${notifyUrl!}',
          amount: '${amount!}',
          extra: '${extra!}',
          sign: '${sign!}'
        },
        success: function(res){
          if(res.code == 0) {
            var data = res.data;
            var payMethod = data.payParams.payMethod;
            if(payMethod == 'formJump') {
              var payUrl = data.payParams.payUrl;
              $('#formJump').html(payUrl);
            }else if(payMethod == 'codeImg') {
              var codeImgUrl = data.payParams.codeImgUrl;
              layer.open({
                title: "扫描二维码支付",
                type: 1,
                anim: 1,
                content: "<img width='200' height='200' src='" +  codeImgUrl + "' />"
              });
            }else {
              layer.open({
                title: "支付结果",
                content: JSON.stringify(data.payParams)
              });
            }
          }else {
            layer.open({
              title: "下单失败",
              icon: 2,
              content: res.msg
            });
          }
          layer.close(load);
          $("#bank_plat_btn").attr('class', "layui-btn");  // 按钮恢复可用
        },
        error: function(res){
          layer.close(load);
          $("#bank_plat_btn").attr('class', "layui-btn");  // 按钮恢复可用
        }
      });
      return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
    }
</script>

</body>
</html>